<template>
  <section>
    <div class="main">
      <div class="left-menu" id="left">
          <ul>
            <li v-for="(good , index) in goods" :key="index" @click="getClick(index)" :class="{'active':index === indexClass}" class="border-1px">
              <img :src="good.icon" class="iconImg" v-if="good.icon" />
              <span>{{good.name}}</span>
            </li>
          </ul>
      </div>
      <div class="con">
        <div class="right-con con-active">
          <div ref="right_scroll">
            <ul v-for="(good ,index) in goods" :key="index">
              <h4 class="h4">{{good.name}}</h4>
              <li v-for="(commodity , i) in good.foods" :key="i" @click="showBanner(commodity)">
                <div class="menu-img"><img :src="commodity.icon"></div>
                <div class="menu-txt">
                  <h4 data-icon="00">{{commodity.name}}</h4>
                  <p class="list1">{{commodity.description?commodity.description:'Activity price'}}</p>
                  <p class="list2">
                    <b>￥</b>
                    <b>{{commodity.price}}</b><br/>
                  </p>
                  <p>
                    <span style="display: inline-block">销量：{{commodity.sellCount}}</span>
                    <span>好评率{{commodity.rating}}%</span>
                  </p>
                </div>
                <Addto :commodity="commodity" />
              </li>
            </ul>
          </div>

        </div>
      </div>
      <div class="up1"></div>
      <div class="shopcart-list fold-transition">
        <div class="list-header">
          <h1 class="title">购物车</h1>
          <span class="empty">清空所有</span>
        </div>
        <div class="list-content">
          <ul></ul>
        </div>
      </div>
      <div class="footer">
        <div class="left">
          <div class="count_num"><span id="totalcountshow">0</span></div>
          <span id="cartN" class="nowrap">总计：<span id="totalpriceshow">0</span>元</span>
        </div>
        <div class="right">
          <a id="btnselect" class="xhlbtn disable" href="order_notes.html">去结算</a>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
  import {mapState} from 'vuex';  //导入vuex的state模块
  import BScroll from 'better-scroll' //导入滚动组件库
  import Addto from '../../../../components/AdditionBtn/AdditionBtn.vue'
  export default {
    data(){
      return {
        indexClass: 0,
        tops: [],
        right: Object,
        banner: {
          "show": true
        }
      }
    },
    mounted(){
      this.$store.dispatch('getGoods',() => {
        this.$nextTick(() => {
          this._initscroll();
          this._inittops();
        });
      });
    },
    computed:{
      ...mapState(['goods'])
    },
    methods:{
      //收集scroll滚动的数据（监视）
      _initscroll(){
        const left = new BScroll('.left-menu',{
          click: true
        });
        this.right = new BScroll('.right-con',{
          probeType: 2,
          click: true
        });
        //绑定滚动事件
        this.right.on('scroll' , (obj) => {
          for(let i=0;i<this.tops.length;i++){
            if(-this.tops[i] === parseInt(obj.y)){
              this.indexClass = i;
            }
          }
        });
        //监视，滚动事件是否停止滚动，如果停止将执行以下函数
        this.right.on('scrollEnd' , (obj) => {
          for(let i=0;i<this.tops.length;i++){
            if(-this.tops[i] >= parseInt(obj.y)){
              this.indexClass = i;
            }
          }
        });
      },
      //收集收集每一个元素的tops值
      _inittops(){
        //1.初始化
        let tops = [];
        let top = 0;
        tops.push(top);
        //2.收集
        const ul = this.$refs.right_scroll.children
        Array.prototype.slice.call(ul).forEach(key => {
          top += key.clientHeight;
          tops.push(top)
        })
        //3.返回
        this.tops = tops;
        console.log(tops)
      },
      //点击滚动
      getClick (index){
        this.indexClass = index;
        this.right.scrollTo(0,-this.tops[index],300)
      },
      //点击发送数据,用sessionStorage存储
      showBanner (commodity){
        this.banner = {
          "show": true,
          "images": commodity.images, //图片
          "name": commodity.name,     //商家名称
          "sellCount": commodity.sellCount,     //销量
          "rating": commodity.rating,       //好评
          "price": commodity.price,         //价格
        }
        //sessionStorage.setItem('gavin',JSON.stringify(this.banner))
        this.resetSetItem('gavin', this.banner);
      }
    },
    components:{
      Addto
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import '../../../../components/commodity/css/classify.css';
  @import '../../../../components/commodity/css/base.css';
  @import '../../../../common/stylus/minxins.styl'
  .h4
    padding 5px 0 5px 5px
    font-size 14px
    background #F5F5F5
  .iconImg
    width 16px
    height 16px
    display inline-block
  .left-menu ul li
    border-bottom: 1px solid #F1F0F0;
  .swiper
    width 12rem
    height 16rem
    background #DEDEDE
    position fixed
    top 50%
    left 50%
    margin -8rem 0 0 -6rem
    z-index 1000
    .swiper-container
      width 100%
      height 200px
      .swiper-wrapper
        width 100%
        height 100%
        .swiper-slide
          background red
</style>
